<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import type { Admin } from "../../model"; //导入自定义数据类型
import ManagerEdit from "./components/ManagerEdit.vue"; //修改管理员页面
import { getAdminList, updateAdmin, deleteAdmin } from "../../api"; //数据接口
import { ElMessage, ElMessageBox } from "element-plus";
//表格数据对象
const tableData = ref<Admin[]>([]);
//表格原始数据
const oldData = ref<Admin[]>([]);
//是否显示 添加修改管理员对话框
const isShowDialog = ref(false);
//添加修改管理员对话框的标题
const dialogTitle = ref("新增管理员");
//定义表单数据对象
const searchForm = reactive({
  username: "",
  state: "0",
});
//当前将要修改的管理员
const admin = reactive({
  id: 0,
  username: "",
  password: "",
});
//搜索管理员
function searchAdmin() {
  if (searchForm.username == "" && searchForm.state == "0") {
    //查询所有管理员
    loadAdminList();
  } else {
    //对现有管理员进行过滤
    tableData.value = oldData.value.filter((item: Admin) => {
      if (searchForm.state == "0") {
        return item.username?.includes(searchForm.username);
      } else {
        return item.username?.includes(searchForm.username) &&
          item.state == (searchForm.state == "1")
          ? true
          : false;
      }
    });
  }
}
//重置搜索表单
function resetForm() {
  searchForm.username = "";
  searchForm.state = "0";
  tableData.value = oldData.value;
}
//新增管理员
function addAdmin() {
  dialogTitle.value = "新增管理员";
  admin.id = 0;
  admin.username = "";
  admin.password = "";
  isShowDialog.value = true;
}
//修改管理员
function updateUser(data: Admin) {
  dialogTitle.value = "修改管理员";
  Object.assign(admin, data);
  isShowDialog.value = true;
}
//删除用户
function delAdmin(data: Admin) {
  //确认对话框
  ElMessageBox.confirm("确定要删除此管理员吗？", {
    closeOnClickModal: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(async () => {
      const res = await deleteAdmin({ id: data.id });
      if (res.data.errno == 0) {
        //重置搜索表单
        resetForm();
        //重新加载数据
        loadAdminList();
        //删除成功
        ElMessage.success(res.data.errmsg);
      } else {
        //删除失败
        ElMessage.error(res.data.errmsg);
      }
    })
    .catch(() => {
      //console.log("点击了取消按扭")
    });
}
//查询所有管理员数据
async function loadAdminList() {
  const res = await getAdminList();
  oldData.value = res.data.data;
  tableData.value = res.data.data;
}
//更改管理员状态
async function switchState(data: Admin) {
  const res = await updateAdmin(data);
  if (res.data.errno == 0) {
    //修改成功
    ElMessage.success(res.data.errmsg);
  } else {
    //修改失败
    ElMessage.error(res.data.errmsg);
  }
}
//关闭对话框
function closeDialog() {
  isShowDialog.value = false;
  loadAdminList();
}
//组件加载完成
onMounted(() => {
  loadAdminList();
});
</script>
<template>
  <div>
    <!--搜索表单-->
    <section class="search">
      <el-form :inline="true">
        <el-form-item label="管理员名称">
          <el-input
            v-model="searchForm.username"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员状态">
          <el-select v-model="searchForm.state" style="width: 200px">
            <el-option label="所有" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchAdmin">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </section>
    <!--表格显示内容-->
    <section class="admin_page">
      <div>
        <el-button type="primary" @click="addAdmin">新增管理员</el-button>
      </div>
      <div>
        <el-table :data="tableData" row-key="id" style="width: 100%" border>
          <!--空数据时显示内容-->
          <template #empty>暂无数据</template>
          <!--表格有数据时的显示内容-->
          <el-table-column prop="id" label="管理员 ID"></el-table-column>
          <el-table-column prop="username" label="管理员名称"></el-table-column>
          <el-table-column
            prop="permission"
            label="管理员角色"
          ></el-table-column>
          <el-table-column label="管理员状态" width="100">
            <template #default="scope">
              <el-switch v-model="scope.row.state" @change="switchState(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button type="warning" @click="updateUser(scope.row)">编辑</el-button>
              <el-button type="danger" @click="delAdmin(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </section>
    <!--新增分类、修改分类，对话框-->
    <el-dialog v-model="isShowDialog" :title="dialogTitle" width="600">
      <ManagerEdit
        :is-show="isShowDialog"
        :admin="admin"
        @closeDialog="closeDialog"
      ></ManagerEdit>
    </el-dialog>
  </div>
</template>
<style scoped>
.admin_page,
.search {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 5px #e4e7ed;
  margin: 20px;
  border: 1px solid transparent;
}
.search {
  height: 50px;
  padding-left: 20px;
  display: flex;
  align-items: center;
}
.search .el-form-item {
  margin-top: 0px;
  margin-bottom: 0px;
}
.admin_page > div {
  margin: 20px;
}
.el-switch {
  --el-switch-off-color: #ff4949;
}
</style>
